import React, { useEffect, useState } from "react";
import { TagInput } from "@ct0/ui";

const switchContainerStyle = { display: "flex", gap: "20px" };
export default function TagInputPanel() {
  const [value, setValue] = useState(["tag1", "tag2"]);
  const onChange = (val) => {
    setValue(val);
  };
  return (
    <div>
      <h2>TagInput 标签输入框</h2>
      <ul>
        <li>受控组件，TagInput状态将通过props传参中的value值来更新</li>
      </ul>
      <h2>代码演示</h2>
      <div>
        <ul>
          <li key="basic">基础调用</li>
        </ul>
        <div style={switchContainerStyle}>
          <TagInput
            value={value}
            disabled
            options={["tag1", "tag2", "tag3"]}
            onChange={onChange}
          />
        </div>
        <div className="code" style={{ marginTop: "10px" }}>
          <pre>
            <code className="language-jsx">
              {`import { TagInput } from '@ct0/ui'`}
              {"\n"}
              {`const onChange = (newValue: string[]) => { 'update TagInput value to newValue' }`}
              {"\n"}
              {`ReactDOM.render(`}
              {"\n"}
              {`<TagInput value={value}  options={['tag1', 'tag2', 'tag3']} onChange={onChange} />`}
              ,mountNode)
            </code>
          </pre>
        </div>
      </div>
      <div>
        <ul>
          <li key="basic">输入标签最大长度（默认30字符）</li>
        </ul>
        <div style={switchContainerStyle}>
          <TagInput
            maxLength={10}
            value={value}
            options={["tag1", "tag2", "tag3"]}
            onChange={onChange}
          />
        </div>
        <div className="code" style={{ marginTop: "10px" }}>
          <pre>
            <code className="language-jsx">
              {`import { TagInput } from '@ct0/ui'`}
              {"\n"}
              {`ReactDOM.render(`}
              {"\n"}
              {`<TagInput maxLength={10} value={value}  options={['tag1', 'tag2', 'tag3']} onChange={onChange} />`}
              ,mountNode)
            </code>
          </pre>
        </div>
      </div>
      <div>
        <ul>
          <li key="basic">options 为异步请求</li>
        </ul>
        <div style={switchContainerStyle}>
          <TagInput
            maxLength={10}
            value={value}
            options={(v) => Promise.resolve(["tag1", "tag2", "tag3"])}
            onChange={onChange}
          />
        </div>
        <div className="code" style={{ marginTop: "10px" }}>
          <pre>
            <code className="language-jsx">
              {`import { TagInput } from '@ct0/ui'`}
              {"\n"}
              {`ReactDOM.render(`}
              {"\n"}
              {`<TagInput
        maxLength={10}
        value={value}
        options={(v) => Promise.resolve(["tag1", "tag2", "tag3"])}
        onChange={onChange}
      />`}
              ,mountNode)
            </code>
          </pre>
        </div>
      </div>
      <h2>API</h2>
      <table border="1" width="50%">
        <thead>
          <tr>
            <th>参数</th>
            <th>说明</th>
            <th>类型</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>value</td>
            <td>选中值(必填)</td>
            <td>string[]</td>
            <td>-</td>
          </tr>
          <tr>
            <td>options</td>
            <td>传入配置项(必填)</td>
            <td>{`string[] | ((v: string) => Promise<string[]>);`}</td>
            <td>-</td>
          </tr>
          <tr>
            <td>onChange</td>
            <td>值改变函数(选填)</td>
            <td>function(value: string[])</td>
            <td>-</td>
          </tr>
          <tr>
            <td>maxLength</td>
            <td>输入框最大长度限制(选填)</td>
            <td>number</td>
            <td>30</td>
          </tr>
          <tr>
            <td>valid</td>
            <td>是否校验(选填)</td>
            <td>boolean</td>
            <td>-</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}
